<template>
  <div class="battery-level-container" :class="batteryClass" :title="`电量：${percentage}%`">
    <div class="battery-level">
      <div class="battery-level-left">
        <div class="battery-level-wrapper" :style="{width: `${percentage}%`}"/>
      </div>
      <div class="battery-level-right"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    percentage: {
      type: Number,
      default: 100
    }
  },
  computed: {
    batteryClass() {
      if (this.percentage > 20) {
        return 'battery-health'
      } else {
        return 'battery-danger'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.battery-level-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .battery-level {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;

    .battery-level-left {
      flex: 1;
      height: 100%;
      background: transparent;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 2px;

      .battery-level-wrapper {
        height: 100%;
      }
    }

    .battery-level-right {
      width: 10%;
      max-width: 3px;
      height: 40%;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}

.battery-health {

  .battery-level-left {
    border: 1px solid var(--el-color-primary);

    .battery-level-wrapper {
      background: var(--el-color-primary);
    }
  }

  .battery-level-right {
    background: var(--el-color-primary);
  }
}

.battery-danger {
  .battery-level-left {
    border: 1px solid var(--el-color-danger);

    .battery-level-wrapper {
      background: var(--el-color-danger);
    }
  }

  .battery-level-right {
    background: var(--el-color-danger);
  }
}
</style>
